Description

This PR improves the FormFieldRenderer component and the configurable registration form with better UX feedback, input validation, and more robust error message handling.

1. Placeholder support for text and textarea fields in FormFieldRenderer.
2. minLength and maxLength restriction applied natively on text inputs using fieldData.restrictions.max_length and fieldData.restrictions.min_length.
3. Animated help text on focus, displays fieldData.instructions while the field is focused, using TransitionReplace.
4. Error message normalization, new normalizeErrorMessage utility that converts backend error messages arriving as objects (e.g., { required: "..." }) to strings, preventing [object Object] from being displayed.
5. Flexible options format for select fields, automatically handling both array ([['key', 'value']]) and object ({ key: 'value' }) formats via Object.entries() conversion.

Testing Instructions

Using Tutor:

1. Create a mount of the MFE, cloning this repository in your tutor root environment, and run tutor mounts add frontend-app-authn.

2. In the MFE folder, run nvm use && npm install

3. In your tutor root environment, run tutor dev start -d

4. Install this Django app to use user extra fields: https://github.com/BryanttV/custom-extra-fields

5. Add the following setting to your platform:

   REGISTRATION_EXTENSION_FORM = "custom_extra_fields.forms.CustomExtraFieldsForm"

6. Create a new site configuration in http://local.openedx.io:8000/admin/site_configuration/siteconfiguration/add/ and add the following json:

   {
     "ENABLE_DYNAMIC_REGISTRATION_FIELDS": "true",
     "MFE_CONFIG": {
       "ENABLE_DYNAMIC_REGISTRATION_FIELDS": "true"
     },
     "REGISTRATION_EXTRA_FIELDS": {
       "nickname": "required",
       "birthdate": "required",
       "interests": "required",
       "wants_newsletter": "required",
       "favorite_language": "required"
     },
     "extended_profile_fields": [
       "nickname",
       "birthdate",
       "interests",
       "wants_newsletter",
       "favorite_language"
     ]
   }

7. Go to the registration page

8. You can test the new validations, user feedback, and error messages.

Screenshots/sandbox (optional):

Before	After
Required field message ERROR 💥
Dropdown Field ERROR! 💥
Without placeholder and help text	With placeholder and help text
Without max length restriction	With max length restriction

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Sandbox, if applicable.
• Is there adequate test coverage for your changes?

Post-merge Checklist

• Deploy the changes to prod after verifying on stage or ask @openedx/2u-infinity to do it.
• 🎉 🙌 Celebrate! Thanks for your contribution.